<template>
	<view class="content">
		<view class='search'>
			<view class='search-c'>
				<image class='icon search-icon' src='/static/images/sousuo2.png'></image>
				<input class='search-input' placeholder-class='search-input-p' placeholder='请输入关键词进行搜索' v-model="key" focus :auto-focus="focus" :fixed="focus"></input>
			</view>
			<button class="btn btn-g" @click="search" hover-class="btn-hover2">搜索</button>
		</view>
		<view class="history-c">
			<view class="history-title">
				<view class='ht-left'>搜索历史</view>
				<view class='ht-right' @click="deleteKey">
					<image src="/static/images/shanchu_ion.png"></image>
				</view>
			</view>
			<view class="history-body" v-if="wallets==''">
				<view  style="color: #999999;text-align: center;">
					暂无搜索历史
				</view>
			</view>
			
			<view class="history-body">
				<view class="hb-item" v-for="(item,index) in wallets" v-if="item.name">
					<view @click="hanldsearch(item.name)">{{item.name}}</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keys: [],
			key: '',
			navType: 'toNav',
			focus: true,
			wallets:[]
		}
	},
	computed: {
	},
	onShow(){
		let wall = uni.getStorageSync('wallets');
		  if(wall){
			  this.wallets = JSON.parse(wall);
			  console.log(this.wallets);
		
		  }
	},
	methods: {
		//搜索
		search: function () {
			if(this.key!=''){
				let that = this;
				that.wallets.push({
					name: that.key
				});
					
				uni.setStorageSync('wallets', JSON.stringify(that.wallets));
				uni.navigateTo({url:`/pages/member/IntegralMall/searchList?address=${this.key}`})
			}
		
			},
			hanldsearch(name){
					uni.navigateTo({url:`/pages/member/IntegralMall/searchList?address=${name}`})
			},
			
	  //删除
	  deleteKey(){
		  uni.removeStorageSync('wallets');
		  this.wallets = [] 
		}
		}
}
</script>

<style>
.search{
	display: flex;
}
.search-c{
	width: 80%;
	margin-right: 2%;
}
.search-input-p{
	padding: 0 !important;
}
.search .btn{
	width: 18%;
	border: none;
	background-color: #F5F5F5;
	font-size: 28upx;
	color: #333;
	border-radius: 6upx;
	line-height: 72upx;
}
.history-c{
	padding: 20upx 26upx;
}
.history-title{
	overflow: hidden;	
}
.ht-left{
	float: left;
	font-size: 30upx;
	color: #1E1F20;
}
.ht-right{
	float: right;
	color: #999;
	font-size: 26upx;
}
.ht-right image{
	width: 14px;
	height: 15px;
}
.history-body{
	overflow: hidden;
	margin-top: 20upx;
	min-height: 200upx;
}
.hb-item{
	display: inline-block;
	float: left;
	background-color: #F5F5F5;
	color: #666666;
	margin-right: 20upx;
	margin-bottom: 14upx;
	font-size: 26upx;
	padding: 10upx 20upx;
	border-radius: 4px;
}
.sticStyle{
	background: none;
	text-align: center;
	width: 100%;
	color: rgb(153, 153, 153);
	padding: 0;
}
.square{
	border-radius: 0;
}
.radius{
	border-radius: 12upx;
}
.search-icon{
	width: 18px;
	height: 18px;
}
.search-c{
	background-color: #F5F5F5;
}
</style>
